<template>
	<cover-view class="between header">
		<cover-view class="icon back" @click="back">
			<cover-image @click="back" src="/static/card/back.png" style="width: 15rpx;height:25rpx"
				mode="widthFix"></cover-image>
		</cover-view>

		<cover-view class="pic-video-tab">
			<cover-view class="item" :class="{active:picOrVideo=='video'}" @click="$emit('update:picOrVideo','video')">
				{{$t("视频")}}
			</cover-view>
			<cover-view class="item" :class="{active:picOrVideo=='pic'}"
				@click="$emit('update:picOrVideo','pic')">{{$t("图片")}}</cover-view>
		</cover-view>

		<cover-view class="edit flex" @click="goForm()">
			<cover-image @click="goForm()" src="/static/card/edit.png" mode="widthFix"
				style="width: 30rpx;height:30rpx;margin-right: 8rpx;display: block;margin-left: 10rpx;"></cover-image>
			<cover-view @click="goForm()" style="margin-right: 10rpx;">{{$t("编辑名片")}}</cover-view>
		</cover-view>

	</cover-view>
</template>

<script>
	export default {
		props: ["picOrVideo", "parent_current_user_id", "evenTtype"],
		methods: {
			back() {
				uni.navigateBack()
			},
			go(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			goForm() {
				this.go('/pages/tabbar/order/card/form/' + this.evenTtype + '?parent_current_user_id=' + this
					.parent_current_user_id)
			}
		}
	}
</script>

<style lang="less">
	.header {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		z-index: 9999;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
		// background-color: #3c3;
		padding-top: var(--status-bar-height);
		height: 100rpx;

		.icon {
			width: 56rpx;
			height: 56rpx;
			border-radius: 9rpx;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.edit {
			width: auto !important;
			font-size: 22rpx;
			color: #fff;
			padding: 0 10rpx;
			display: flex;
			background: rgba(0, 0, 0, 0.5);
			height: 56rpx;
			display: flex;
			border-radius: 9rpx;
			align-items: center;
			justify-content: center;
		}
	}

	.pic-video-tab {
		position: absolute;
		z-index: 999;
		display: flex;
		background-color: rgba(0, 0, 0, 0.5);
		height: 56rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		left: 50%;
		transform: translateX(-50%);

		.item {
			height: 100%;
			font-size: 28rpx;
			min-width: 100rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 24rpx;
		}

		.active {
			background-color: #fff !important;
			border-radius: 50rpx !important;
			color: #1d1d1d !important;
		}
	}
</style>